/*************
 **
 ** Project:      stopwatch
 ** File info:    $Id: MainPage.qml 23 2012-05-04 10:44:29Z Kuzma.Shapran@gmail.com $
 ** Author:       Copyright (C) 2011 Kuzma Shapran <Kuzma.Shapran@gmail.com>
 ** License:      GPLv3
 **
 **  This file is part of Stopwatch.
 **
 **  Stopwatch is free software: you can redistribute it and/or modify
 **  it under the terms of the GNU General Public License as published by
 **  the Free Software Foundation, either version 3 of the License, or
 **  (at your option) any later version.
 **
 **  Stopwatch is distributed in the hope that it will be useful,
 **  but WITHOUT ANY WARRANTY; without even the implied warranty of
 **  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 **  GNU General Public License for more details.
 **
 **  You should have received a copy of the GNU General Public License
 **  along with Stopwatch.  If not, see <http://www.gnu.org/licenses/>.
 **
 *************/


import QtQuick 1.1
import com.nokia.symbian 1.1
import core 1.0

Page {
    id: mainPage

    property alias buttonStartStopHighlighter: buttonStartStopHighlighter
    property alias buttonLapClearHighlighter: buttonLapClearHighlighter
    property alias toolBarAddDeleteHighlighter: toolBarAddDeleteHighlighter
    property alias toolBarPlayPauseHighlighter: toolBarPlayPauseHighlighter
    property alias mainMenu: mainMenu
    property alias menuHighlighter: menuHighlighter
    property alias menuStartStopHighlighter: menuStartStopHighlighter
    property alias menuLapHighlighter: menuLapHighlighter
    property alias menuClearHighlighter: menuClearHighlighter

    property int elapsed
    property bool isTimerActive: false
    property bool isTimerReset: true

    property bool landscape: width >= (height * 2.0)

    function timeToString(value)
    {
        var msec2 = value % 10; value = Math.floor(value / 10);
        var msec1 = value % 10; value = Math.floor(value / 10);
        var msec0 = value % 10; value = Math.floor(value / 10);
        var  sec1 = value % 10; value = Math.floor(value / 10);
        var  sec0 = value %  6; value = Math.floor(value /  6);
        var  min1 = value % 10; value = Math.floor(value / 10);
        var  min0 = value %  6; value = Math.floor(value /  6);
        var hour1 = value % 10; value = Math.floor(value / 10);
        var hour0 = value /*% 10*/; // value = Math.floor(value / 10);
        return ""
                + hour0
                + hour1 + ":"
                +  min0
                +  min1 + ":"
                +  sec0
                +  sec1 + "."
                + msec0
                + msec1
                + msec2;
    }

    function start_or_stop()
    {
        isTimerActive = !isTimerActive
        if (isTimerActive)
        {
            isTimerReset = false;
            lap.start();
            timer.start();
        }
        else
        {
            timer.stop();
            addLap();
            buttonStartStop.text = timeToString(elapsed);
            lap.invalidate();
        }
    }

    function updateTimer()
    {
        if (symbian.foreground)
            buttonStartStop.text = timeToString(elapsed + lap.elapsed());
    }

    function clearTimer()
    {
        isTimerReset = true;
        lap.invalidate();
        elapsed = 0;
        buttonStartStop.text = "00:00:00.000";
        listModel.clear();
    }

    function addLap()
    {
        var last_lap = lap.restart();
        elapsed += last_lap;
        listModel.append({totalTime: timeToString(elapsed), lapTime: timeToString(last_lap), odd: ((listModel.count % 2 ) == 1)})
        listViewLaps.positionViewAtEnd()
    }

    function clear_or_lap()
    {
        if (isTimerActive)
            addLap();
        else
            clearTimer();
    }

    tools: ToolBarLayout {
        id: toolBarLayout
        ToolButton {
            flat: true
            iconSource: "toolbar-back"
            onClicked: window.pageStack.depth <= 1 ? Qt.quit() : window.pageStack.pop()
        }

        ToolButton {
            flat: true
            iconSource: isTimerActive ? "toolbar-add" : "toolbar-delete"
            enabled: isTimerActive || !isTimerReset
            opacity: enabled ? 1.0 : 0.25
            onClicked: clear_or_lap()

            Highlighter {
                id: toolBarAddDeleteHighlighter
            }
        }

        ToolButton {
            flat: true
            iconSource: isTimerActive ? "toolbar-mediacontrol-pause" : "toolbar-mediacontrol-play"
            onClicked: {
                buttonStartStop.checked = !buttonStartStop.checked;
                start_or_stop();
            }

            Highlighter {
                id: toolBarPlayPauseHighlighter
            }
        }

        ToolButton {
            flat: true
            iconSource: "toolbar-menu"
            onClicked: mainMenu.open()

            Highlighter {
                id: menuHighlighter
            }
        }
    }

    Menu {
        id: mainMenu
        content: MenuLayout {
            MenuItem {
                text: isTimerActive ? "Stop" : "Start"
                onClicked: {
                    buttonStartStop.checked = !buttonStartStop.checked;
                    start_or_stop();
                }

                Highlighter {
                    id: menuStartStopHighlighter

                    onFinished: mainMenu.close()
                }
            }
            MenuItem {
                text: "Lap"
                onClicked: addLap();
                enabled: isTimerActive

                Highlighter {
                    id: menuLapHighlighter

                    onFinished: mainMenu.close()
                }
            }
            MenuItem {
                text: "Clear"
                onClicked: clearTimer();
                enabled: !isTimerActive && !isTimerReset

                Highlighter {
                    id: menuClearHighlighter

                    onFinished: mainMenu.close()
                }
            }
            MenuItem {
                text: "About"
                onClicked: window.showAbout()
            }
            MenuItem {
                text: "Help"
                onClicked: window.showHelp()
            }
            MenuItem {
                text: "Exit"
                onClicked: Qt.quit()
            }
        }
    }

    ElapsedTimer {
        id: lap
    }

    Timer {
        id: timer
        interval: 11
        repeat: true

        onTriggered: updateTimer();
    }

    Item {
        id: rectangleOne

        anchors {
            left: parent.left
            top:  parent.top
        }
        width:  landscape ? (parent.width / 2) : parent.width
        height: landscape ? parent.height : (parent.height / 2)

        Button {
            id: buttonStartStop
            checkable: true
            text: "00:00:00.000"
            font.pixelSize: platformStyle.fontSizeLarge * rectangleOne.width / 200.0

            anchors {
                left:   parent.left
                right:  parent.right
                top:    parent.top
                bottom: buttonClearLap.top
            }

            onClicked: start_or_stop()

            Highlighter {
                id: buttonStartStopHighlighter
            }
        }

        Button {
            id: buttonClearLap
            text: isTimerActive ? "Lap" : "Clear"
            height: Math.max(implicitHeight + 1, parent.height / 4)

            anchors {
                left:   parent.left
                right:  parent.right
                bottom: parent.bottom
            }

            enabled: isTimerActive || !isTimerReset
            onClicked: clear_or_lap()

            Highlighter {
                id: buttonLapClearHighlighter
            }
        }
    }

    Item {
        id: rectangleTwo

        anchors {
            left: landscape ? rectangleOne.right : parent.left
            top:  landscape ? parent.top : rectangleOne.bottom
        }
        width:  landscape ? (parent.width / 2) : parent.width
        height: landscape ? parent.height : (parent.height / 2)

        Item {
            anchors.fill: parent

            ListHeading {
                id: tableHeader
                anchors.top: parent.top
                width: parent.width
                height: headerTotalTime.height + headerLap.anchors.topMargin + headerLap.anchors.bottomMargin
                visible: listModel.count != 0

                Row {
                    id: headerLap
                    anchors.fill: parent
                    anchors.leftMargin: platformStyle.paddingLarge
                    anchors.rightMargin: platformStyle.paddingLarge
                    anchors.topMargin: platformStyle.paddingSmall
                    anchors.bottomMargin: platformStyle.paddingSmall
                    spacing: platformStyle.paddingLarge

                    Item {
                        width: parent.width / 2
                        height: headerTotalTime.height

                        ListItemText {
                            id: headerTotalTime
                            text: "Total"
                            font.bold: true
                            anchors.centerIn: parent
                            color: platformStyle.colorNormalLight
                        }
                    }

                    Item {
                        width: parent.width / 2
                        height: headerLapTime.height

                        ListItemText {
                            id: headerLapTime
                            text: "Lap"
                            font.bold: true
                            anchors.centerIn: parent
                            color: platformStyle.colorNormalLight
                        }
                    }
                }
            }

            ListView {
                id: listViewLaps
                width: parent.width
                anchors {
                    top: tableHeader.bottom
                    topMargin: 5
                    bottom: parent.bottom
                }
                focus: false
                clip: true

                model: ListModel {
                    id: listModel
                }

                delegate: Item {
                    width: listViewLaps.width
                    height: textTotalTime.height + rowLap.anchors.topMargin + rowLap.anchors.bottomMargin

                    Row {
                        id: rowLap
                        anchors.fill: parent
                        anchors.leftMargin:   platformStyle.paddingLarge
                        anchors.rightMargin:  platformStyle.paddingLarge
                        anchors.topMargin:    platformStyle.paddingSmall
                        anchors.bottomMargin: platformStyle.paddingSmall
                        spacing: platformStyle.paddingLarge

                        Item {
                            width: parent.width / 2
                            height: textTotalTime.height

                            ListItemText {
                                id: textTotalTime
                                text: totalTime
                                anchors.centerIn: parent
                                color: odd ? platformStyle.colorNormalMid : platformStyle.colorNormalLight
                                font.pixelSize: platformStyle.fontSizeSmall * Math.min(1.0, rectangleTwo.width / 200.0)
                            }
                        }

                        Item {
                            width: parent.width / 2
                            height: textLapTime.height

                            ListItemText {
                                id: textLapTime
                                text: lapTime
                                anchors.centerIn: parent
                                color: odd ? platformStyle.colorNormalMid : platformStyle.colorNormalLight
                                font.pixelSize: platformStyle.fontSizeSmall * Math.min(1.0, rectangleTwo.width / 200.0)
                            }
                        }
                    }
                }
            }

            ScrollBar {
                flickableItem: listViewLaps
                anchors {
                    right:  listViewLaps.right
                    top:    listViewLaps.top
                    bottom: listViewLaps.bottom
                }
            }
        }
    }
}
